<template>
	<div class="padding20">
		<el-tabs v-model="activeGroup" type="border-card" @tab-click="tabClickHandler">
			<el-tab-pane v-for="item in TagGroup_cmsList" :key="item.code" :label="item.name" :name="item.code">
				<config-list :tagGroup="activeGroup" v-if="item.code == activeGroup"></config-list>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import { cmsconfigInfo, cmsconfigSave, cmsconfigEdit } from "@/api/cms/cmsconfig.js"
import { enumList } from "@/api/public.api.js"
import * as ftVal from "@/common/fortressValidator.js"
import ConfigList from "./config-list.vue"
export default {
	data() {
		return {
			activeGroup: "-1",
			form: {
				id: "",
				name: "",
				tagName: "",
				valueType: "",
				tagValues: "",
				updateUser: "",
				updateTime: "",
				tagGroup: "",
				sort: "",
				isText: "2",
			},
			formLabelWidth: "120px",
			rules: {
				sort: [{ validator: ftVal.validatePInteger, trigger: "blur" }],
			},
			ConfigValueType_cmsList: [],
			TagGroup_cmsList: [],
			YesNoList: [],
		}
	},
	components: {
		"config-list": ConfigList,
	},
	created() {
		this.TagGroup_cmsList = [{ code: "-1", name: "全部", desc: "基础配置" }]
		enumList("TagGroup", "cms").then(resp => {
			if (resp.code == 0) {
				if (resp.data) {
					resp.data.forEach(item => {
						this.TagGroup_cmsList.push(item)
					})
				}
			}
		})
	},
	methods: {
		tabClickHandler(e) {
			console.log(e)
		},
		init(id) {
			this.resetForm()
			this.queryEnumList()
			//修改
			if (id) {
				cmsconfigInfo(id).then(resp => {
					if (resp.code == 0) {
						this.$nextTick(() => {
							this.form = {
								...this.form,
								...resp.data,
							}
						})
					} else {
						this.$msg({
							message: resp.msg,
							type: "error",
						})
					}
				})
			}
		},
		//提交表单数据
		submitForm() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					//修改
					if (this.form.id) {
						cmsconfigEdit(this.form).then(resp => {
							if (resp.code == 0) {
								this.$message({
									type: "success",
									message: "操作成功!",
								})
								this.$emit("refreshData")
							} else {
								this.$msg({
									message: resp.msg,
									type: "error",
								})
							}
						})
						//新增
					} else {
						cmsconfigSave(this.form).then(resp => {
							if (resp.code == 0) {
								this.$message({
									type: "success",
									message: "操作成功!",
								})
								this.$emit("refreshData")
							} else {
								this.$msg({
									message: resp.msg,
									type: "error",
								})
							}
						})
					}
				} else {
					console.log("error submit!!")
					return false
				}
			})
		},
		resetForm() {
			this.form = {
				id: "",
				name: "",
				tagName: "",
				valueType: "",
				tagValues: "",
				updateUser: "",
				updateTime: "",
				tagGroup: "",
				sort: "",
				isText: "",
			}
			this.$nextTick(() => {
				if (this.$refs["form"]) {
					this.$refs["form"].resetFields()
				}
			})
		},
	},
}
</script>
<style lang="scss">
.date {
	.el-date-editor--daterange.el-input__inner {
		width: 230px !important;
	}
	.el-date-editor .el-range-separator {
		width: 24px !important;
	}
}
</style>
<style lang="scss" scoped></style>
